<template>
  <div>
    <el-row type="flex" justify="end">
      <el-button size="small" class="btn1" type="primary" @click="addFn">添加权限</el-button>
    </el-row>
    <el-card class="bigCard">
      <!-- default-expand-all -->
      <el-table :data="permissionData" border style="width: 100%" default-expand-all row-key="id">
        <el-table-column prop="title" label="权限名称" />
        <el-table-column prop="code" label="权限标志" />
        <el-table-column prop="description" label="权限描述" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-row type="flex">
              <el-button v-if="row.pid == '0'" size="small" type="primary" @click="addSubFn(row.id)"
                >添加子权限</el-button
              >
              <el-button size="small" @click="editFn(row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteFn(row)">删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加权限弹框 -->
      <AddPermission ref="dialog" :is-show.sync="showDialog" @update="getPermission" />
    </el-card>
  </div>
</template>

<script>
import { getPermission, deletePermission, getPermissionById } from '@/api/permission'
import AddPermission from './component/add-permission.vue'
import { listToTree } from '@/utils'
export default {
  components: {
    AddPermission
  },
  data() {
    return {
      permissionData: [],

      showDialog: false
    }
  },
  created() {
    this.getPermission()
  },
  methods: {
    // 获取权限列表
    async getPermission() {
      const res = await getPermission()
      // this.permissionData = res.data
      // console.log('51', res)
      this.permissionData = listToTree(res.data, '0')
      // console.log('53', this.permissionData)
    },
    // 添加权限
    addFn() {
      this.showDialog = true
      this.$refs.dialog.formData.pid = '0'
    },
    // 添加子权限
    async addSubFn(id) {
      this.showDialog = true
      this.$nextTick(() => {
        this.$refs.dialog.formData.pid = id + ''
        // console.log('父id', this.$refs.dialog.formData.pid)
      })
    },
    // 编辑
    async editFn(id) {
      this.showDialog = true
      // 回显数据
      const res = await getPermissionById(id)
      this.$refs.dialog.formData = res.data
    },
    // 删除
    deleteFn(obj) {
      // 获取被点击的权限的所有信息
      console.log(obj)
      this.$confirm('是否删除该权限？', '删除', { type: 'warning' })
        .then(async () => {
          // 如果删除的是一级部门,那么旗下的子部门同时全部删除
          if (obj.pid === '0') {
            // 遍历该权限下的children,根据每一个child的id来删除
            obj.children.forEach(async (element) => {
              await deletePermission(element.id)
            })
          }
          await deletePermission(obj.id)
          this.getPermission()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-button--default {
  background-color: #388fd5;
}
.el-button--danger {
  color: #fff;
  // background-color: $orange;
}
.btn1 {
  margin: 1.042vw 1.042vw 0 0;
}
</style>
